<template>
	<view class="table">
		<!-- 表头 -->
		<view class="row header" :style="{background:$store.state.bgPrimaryColor}">
			<text class="cell header-cell" style="flex: 1.3;white-space: nowrap;width:55rpx;" id="box">周课表</text>
			<text class="cell header-cell">一</text>
			<text class="cell header-cell">二</text>
			<text class="cell header-cell">三</text>
			<text class="cell header-cell">四</text>
			<text class="cell header-cell">五</text>
			<text class="cell header-cell">六</text>
			<text class="cell header-cell">日</text>
		</view>
		<!-- 表格内容 -->
		<view class="row" v-for="(item, index) in data" :key="index">
			<view class="cell" :style="{'width':55+'rpx','flex':'1.3'}">{{ item.time }}</view>
			<block v-for="(a_item,a_index) in item.children" :key="a_index">
				<text class="cell" v-if="a_item.is_setting == 1"
					:style="{'font-size':'28rpx',backgroundColor:a_item.is_setting == 1 ? '#c7c7c7' : '#fff',}">▲</text>
				<text class="cell" @click="checkIndex(index,a_index)"
					v-else-if="a_item.is_setting == 0 && a_item.is_choose == 1">{{ '✔'}}</text>
				<text class="cell" @click="checkIndex(index,a_index)" v-else="a_item.is_choose == 0">{{''}}</text>
			</block>
		</view>
	</view>
</template>
<script>
	import {
		getTime
	} from '../../api/Home.js';
	export default {
		props: {
			value: {
				type: [String, Number],
				default: null
			},
			option: {
				type: [String, Number],
				default: null
			},
		},
		data() {
			return {
				data: [],
				Is_Index: 2,
				width: 0
			};
		},
		watch: {
			'value': function(newval, val) {
				this.Is_Index = newval;
				if (newval < val) {
					this.nullData();
				}
			}
		},
		mounted() {
			this.getTime();
			this.width = document.getElementById('box').offsetWidth;
		},
		onLoad(e) {
			console.log(e, 'sssssssssss')
		},
		methods: {
			async getTime() {
				try {
					const res = await getTime({
						teacher_id: this.option
					});
					this.data = [...res.data];
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			checkIndex(index1, index2) {
				console.log(this.calculateStats(this.Is_Index), 'ggggg')
				if (this.calculateStats(this.data) < this.Is_Index || this.data[index1].children[index2].is_choose == 1) {
					this.$set(this.data[index1].children[index2], 'is_choose', this.data[index1].children[index2]
						.is_choose == 0 ? 1 : 0);
					uni.$emit('kcCheck', this.data);
				} else {
					uni.showToast({
						title: '已超出规定选择！',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
			},
			calculateStats(childrens) {
				var num = 0;
				for (var i = 0; i < childrens.length; i++) {
					for (var j = 0; j < childrens[i].children.length; j++) {
						if (childrens[i].children[j].is_choose == 1) {
							num++;
						}
					}
				}
				return num;
			},
			nullData() {
				for (var i = 0; i < this.data.length; i++) {
					for (var j = 0; j < this.data[i].children.length; j++) {
						if (this.data[i].children[j].is_choose == 1) {
							this.data[i].children[j].is_choose = 0;
						}
					}
				}
			}
		}
	};
</script>
<style scoped>
	.table {
		width: 100%;
	}

	.row {
		display: flex;
		flex-direction: row;
		width: 100%;
	}

	.cell {
		flex: 1;
		padding: 10rpx;
		border: 1px solid #C9EEFD;
		text-align: center;
		font-size: 26rpx;
	}

	.header {
		font-weight: bold;
	}
</style>